<template>
	<div class="search-wrap">
		<input style="border:1px solid #3F536E;" class="input-k" type="text" value="" @confirm="inputConfirmHandler()" v-model="text" />
		
		<div style="overflow: hidden; padding-top: 20px;">
			<span class="myspan" v-for="(item,index) in historyKeywords" :key="index" @click="spanClickHanlder(item)">
				{{item}}
			</span>
		</div>
		
		<div v-for="(name,index) in zngyList" :key="index">
			<div v-html="giveMeAHTML(name)"></div>
		</div>
		
		 
	</div>
</template>

<script>
	export default {
		// onShow表示当展示这个页面的时候。onLoad表示当加载这个页面的时候。
		// 从product-list页面点击返回按钮回来，触发onShow生命周期，而不会触发onLoad生命周期
		// 为啥呢？？因为当前search.vue已经加载过了，当然不触发onLoad了，但是又可见了，所以触发onShow生命周期。
		// 从首页进来，都会触发onShow、onLoad
		onShow() {
			// 当search页面打开时，必须读取本地存储器
			wx.getStorage({
				key: 'keyword',
				success: data => {
					// 将本地存储中的数组，设置为我们的历史关键词
					this.historyKeywords = JSON.parse(data.data);
				}
			})
		},
		data() {
			return {
				text: '123',
				// 历史关键词
				historyKeywords: [],
				// 智能感应列表
				zngyList: []
			}
		},
		methods: {
			// 电脑中是按回车，小程序中按输入法右下角的确定按钮
			inputConfirmHandler() {
				// 本地存储，为了能够连续存储，不覆盖，所以存储一个数组
				// 读出来
				wx.getStorage({
					// key表示读存储器中的哪个键？
					key: 'keyword',
					// 读取失败，说明用户第一次用小程序，没有keyword那个键
					fail: data => {
						console.log('没有找到数组，初始化一个');
						let arr = [this.text];
						// 写入本地存储
						wx.setStorage({
							key: 'keyword',
							// 把数组变为字符串存进去。
							data: JSON.stringify(arr)
						});
					},
					// 读取成功，说明是老用户，之前有keyword存下来了
					// 就需要读→推入→写
					success: data => {
						console.log('已经读取到现有数组');
						let arr = JSON.parse(data.data);
						// 把这项推入
						arr.push(this.text);
						// 数组去重，以前真讲过。但是你忘却了，说明明天的面试辅导课太重要了！要复习巩固的！
						arr = arr.reduce((a, b) => a.includes(b) ? a : [...a, b], []);
						// 写入本地存储
						wx.setStorage({
							key: 'keyword',
							// 把数组变为字符串存进去。
							data: JSON.stringify(arr)
						});
					}
				});
				 
				
				// 跳转页面即可
				wx.navigateTo({
					url: '/pages/product-list/product-list?keyword=' + this.text
				});
			},
			// 点击历史小span
			spanClickHanlder(v) {
				// 跳转页面即可
				wx.navigateTo({
					url: '/pages/product-list/product-list?keyword=' + v
				});
			},
			// 转HTML，目的是高亮关键词
			giveMeAHTML(name) {
				// 寻找keyword的位置
				let index = name.indexOf(this.text);
				
				// 返回span标签
				return name.slice(0, index) + '<span style="color: red;">' + this.text + '</span>' + name.slice(index + this.text.length);
			}
		},
		watch: {
			// 监控改变，发出Ajax请求，做智能感应
			text(v) {
				wx.request({
					url: 'http://www.zkt-it.com:5050/user?kw=' + v,
					success: data => {
						this.zngyList = data.data.results.map(item => item.name);
					}
				});
			}
		}
	}
</script>

<style>
	.search-wrap {
		padding: 10px;
	}
	.myspan {
		margin-top: 20px;
		margin-bottom: 20px;
		padding: 4px 6px;
		background: #C0C0C0;
		margin-right: 10px;
	}
</style>